<template>
	<div>
	    <div class="text">
	        <span>{{i18n('list.Announcement','公司公告')}}</span>
	    </div>
	    <div class="item" v-for="(item,index) in news" :key="index">
	        <div class="item_text">
	            <div class="item_img"  v-if="item.imgFileId">
	                <img :src="imageUrl(item.imgFileId)" class="avatar">
	            </div>
	            <div class="item_text_right">
	            	<div class="item_tit">
	                    {{item.subject}}
	                </div>
                    <div class="re-news-list">
                        <div>
                            <i class="iconfont icon-people"></i>
                            <span>{{item.author}}</span>
                        </div>
                        <div>
                            <i class="iconfont icon-time"></i>
                            <span>{{item.createTime}}</span>
                        </div>
                    </div>

	            </div>
	        </div>
	    </div>
	</div>
</template>

<script type="text/ecmascript-6">

import InsNewsApi from '@/api/portal/core/insNews'
import {TokenUtil} from "@lowcode/jpaas-common-lib"

export default{
    name:"rx-news",
    props:{
    	num:Number,
    },
    data(){
    	return{
    		news:[]
    	}
    },
    mouted(){

    },
	methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"InsNews",key);
        },
        getAllNews() {
          if(!this.num) return;
          var params={
            pageNo:1,
            pageSize:this.num
          }
          InsNewsApi.query(params).then(res=>{
            this.news=res.data;
          })
        },
        imageUrl(fileId) {
            var accessToken = TokenUtil.getToken();
            return `/api/api-system/system/core/sysFile/downloadScale/${fileId}?accessToken=`+accessToken;
        },
	},
	created() {
		this.getAllNews();
	},
	watch:{
		num:function(val){
			if(val&&val<=20){
				this.getAllNews();
			}
		}
	}
}

</script>

<style type="text/css" scoped>
.re-news-list{
    display: flex;
    margin-top: 5px;
}
.re-news-list>div:nth-child(1){
    flex: 1;
}
.notice{
    width: 100%;
    height: auto;
    margin-top: 16px;
    background-color: white;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}
.notice .text{
    height: 45px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid #eeeeee;
}
.notice .text span{
	display: inline-block;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.notice .item{
    height: 72px;
    display: flex;
    flex: 1;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid #eeeeee;
    cursor: pointer;
     justify-content: space-between;
    align-items: center;
}
.item_text{
    width:300px;
    height: 100%;
    display: flex;
    align-items: center;
}

.item_img{
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    margin-right: 10px;
}
.item_text_right{
	width: 220px;
}
.item_tit{
    width: 100%;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item_dec{
	display: flex;
	margin-top: 13px;
}
.item_dec .user{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999999;
}
.item_dec .time{
    display: flex;
    font-size: 12px;
    color: #999999;
    margin-left: 60px;
    margin-top: 2px;
}
.item_img img{
	width: 100%;
	height: 100%;
}
.notice > div > .item:last-child{
	border-bottom: 0;
}


</style>
